<template>
  <div class="main-wrap">
    <div :class="`${mainNav ? 'main-nav2' : 'main-nav'}`">
      <a
        :href="title.href"
        :class="`${mainNav ? 'main-item2' : 'main-item'} ${
          index === currentIndex ? 'nav-item-active' : ''
        }`"
        v-for="(title, index) in titleList"
        :key="title.id"
        @click="showItem(title.id, index)"
      >
        <div :class="`${mainNav ? 'nav-title2' : 'nav-title'}`">
          {{ title.title }}
        </div>
        <i :class="`${mainNav ? 'nav-text2' : 'nav-text'}`">{{ title.text }}</i>
      </a>
    </div>
    <div class="nav-wrap"></div>
    <div class="city-hotel-detail" id="detail">
      <div class="city-hotel">广州民宿 > 广州番禺区民宿</div>
      <div class="hotel-title">
        【新房专享】北欧风|临近珠江边|舒适江景房，自助入住|洛溪地铁站近广州南站|干净卫生|亲子度假
      </div>
      <ul class="hotel-tag">
        <li>寄存行李</li>
        <li>洗衣机</li>
        <li>露台/阳台</li>
        <li>宽松取消</li>
        <li>可开发票</li>
        <li>落地窗</li>
        <li>有电梯</li>
        <li>书桌</li>
        <li>冰箱</li>
        <li>自助入住</li>
        <li>允许聚会</li>
      </ul>
    </div>

    <div class="detail-container-left">
      <div class="confirm" @click="showDetail">
        <span class="confirm-left">
          <span class="iconfont icon-dagou1"></span>
          <span>立即确认</span>
          <span class="iconfont icon-dagou1"></span>
          <span>极速退款</span>
        </span>
        <span class="iconfont icon-xiala xiala-right"></span>
      </div>
      <div class="confirm-detail" v-if="!show">
        <div class="confirm-detail-wrap">
          <span class="confirm-ok">立即确认</span>
          <span class="confirm-text">下单即有房，无需等待确认</span>
        </div>
        <div class="confirm-detail-wrap" style="border: none">
          <span class="confirm-ok">极速退款</span>
          <span class="confirm-text">30分钟内免费取消</span>
        </div>
      </div>
      <div class="hotel-type-container">
        <div class="hotel-type-wrap">
          <div class="hotel-type">
            <div class="hotel-type-item">
              <div class="iconfont icon-jiudian"></div>
              <div>
                <div class="hotel-type-title">整套</div>
                <div class="hotel-type-text">50m²</div>
              </div>
            </div>
            <div class="hotel-type-item">
              <span class="iconfont icon-xishougui"></span>
              <div>
                <div class="hotel-type-title">1间卧室</div>
                <div class="hotel-type-text">一厅0厨1卫</div>
              </div>
            </div>
            <div class="hotel-type-item">
              <span class="iconfont icon-Bed"></span>
              <div>
                <div class="hotel-type-title">可住2人</div>
                <div class="hotel-type-text">
                  一张双人床<span
                    class="iconfont icon-xiala"
                    @click="showBedSize"
                  ></span>
                </div>
              </div>
            </div>
          </div>
          <div class="bed-size" v-if="!bedSize">2x1.8米双人床x1 | 可住2人</div>
        </div>
        <div class="line"></div>
        <div class="address">
          <p>亲爱的客人，欢迎来到我们的家！</p>
          <p @click="showAddress" class="address-p">
            【位置】我家靠近东晓南地铁站、南浦地铁站、洛溪地铁站、厦滘地铁站、南洲地铁站
            <span v-if="showText">...</span>
          </p>
          <div class="address addressLeft" v-if="!showText">
            <p>
              【特色服务】我们将为您提供行李寄存服务，从入住到退房一条龙的管家式服务
            </p>
            <p>
              【户型功能】我家是温馨1居（1室1厅1卫0厨房），房源有1张双人床可供2人居住，希望您有个舒适的睡眠。
            </p>
            <p>
              【入住安心】房源配置智能密码锁，出入无需钥匙门卡，全程自助，给您安静的享受
            </p>
            <p>【干净卫生】我们有专业的保洁清扫，让您住得安心</p>
          </div>
        </div>
      </div>
      <div class="discount">
        <div class="collect-coupons">
          <div class="discount-title">领券</div>
          <div class="discount-text">满499.0减66.0</div>
          <div class="stow" @click="showCashCoupon">
            {{ isShowCashCoupon ? "更多优惠券" : "收起" }}
            <span class="iconfont icon-xiala"> </span>
          </div>
        </div>
        <div class="money-wrap" v-if="!isShowCashCoupon">
          <div class="money-item">
            <div class="money-container">
              <span class="money-icon">￥</span>
              <span class="money-num">66</span>
            </div>
            <div class="money-text">满499元可用</div>
          </div>
          <div class="landlord-wrap">
            <div class="landlord-title">房东代金券</div>
            <div class="landlord-text">
              <div>入住首日在2022.11.08.202</div>
              <div>2.11.18可用</div>
            </div>
          </div>
          <div class="receive">
            <div class="receive-item">领取</div>
          </div>
        </div>
        <div class="promotion">
          <div class="discount-title">促销</div>
          <ul class="promotion-tag" v-if="isShowTagDetail">
            <li>今夜特价</li>
            <li>新房特惠</li>
            <li>首单特惠</li>
            <li>早鸟特惠</li>
            <li>连住优惠</li>
          </ul>
          <div class="stow" @click="ShowTagDetail">
            {{ isShowTagDetail ? "更多活动" : "收起" }}
            <span class="iconfont icon-xiala"></span>
          </div>
        </div>
        <div class="tag-detail-wrap" v-if="!isShowTagDetail">
          <div class="tag-detail">
            <span class="tag-title">今夜特价</span>
            <span class="tag-text">20:00~次日3:00预订，享受当晚6折优惠</span>
          </div>
          <div class="tag-detail">
            <span class="tag-title">新房特价</span>
            <span class="tag-text">新上架房源，首批房客可享受6.8折优惠</span>
          </div>
          <div class="tag-detail">
            <span class="tag-title">首单特惠 </span>
            <span class="tag-text">新用户首单支付享8折</span>
          </div>
          <div class="tag-detail">
            <span class="tag-title">早鸟特惠</span>
            <span class="tag-text">提前1天预订入住1天以上，享受7.5折优惠</span>
          </div>
          <div class="tag-detail">
            <span class="tag-title">连住优惠</span>
            <span class="tag-text">2天以上8折优惠，3天以上7.8折优惠</span>
          </div>
        </div>
      </div>
      <div class="host-wrap" id="host">
        <span class="host">房东</span>
        <span class="host-text">Host</span>
      </div>
      <div class="hotel-name-wrap">
        <img
          src="https://img.meituan.net/avatar/cf08cbdd690b0accae7f9ae80c14f6fa17759.jpg@200w_200h_1e_1c"
          class="hotel-name-img"
        />
        <div class="hotel-name-item">
          <div class="hotel-name-title">一乐一舍</div>
          <div class="hotel-name-text">实名认证 | 1套房源</div>
        </div>
      </div>
      <div class="host-wrap" id="location">
        <span class="host">房源位置</span>
        <span class="host-text">LOCATION</span>
      </div>
      <HotelMap />
      <FacilityServices id="amenities" />
      <orderingDetail />
      <div
        :class="`${
          detailRightRef ? 'detail-container-right2' : 'detail-container-right'
        }`"
      >
        <HotelDetailRight />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HotelDetailMain",
};
</script>

<script setup>
import { onMounted, ref, watch } from "vue";
import FacilityServices from "../FacilityServices/index.vue";
import HotelDetailRight from "../hotel-detail-right/index.vue";
import HotelMap from "../hotel-map/index.vue";
import orderingDetail from "../orderingDetail/index.vue";

const titleList = [
  { id: 101, href: "#detail", title: "概览", text: "DETAIL" },
  { id: 102, href: "#host", title: "房东", text: "HOST" },
  { id: 103, href: "#location", title: "位置", text: "LOCATION" },
  { id: 104, href: "#amenities", title: "设施", text: "AMENITIES" },
];

const showItem = (id, index = 0) => {
  currentIndex.value = index;
};
const currentIndex = ref(0);
const show = ref(true);
const showText = ref(true);
const bedSize = ref(true);
const isShowCashCoupon = ref(true);
const isShowTagDetail = ref(true);
const showAddress = () => {
  showText.value = !showText.value;
};
const showDetail = () => {
  show.value = !show.value;
};
const showBedSize = () => {
  bedSize.value = !bedSize.value;
};
const showCashCoupon = () => {
  isShowCashCoupon.value = !isShowCashCoupon.value;
};
const ShowTagDetail = () => {
  isShowTagDetail.value = !isShowTagDetail.value;
};
const detailRightRef = ref("");
const mainNav = ref("");

// 当前滚动距离
const scroll = ref(0);
const scrollTop = () => {
  scroll.value = document.documentElement.scrollTop;
  if (scroll.value >= 480) {
    mainNav.value = "main-nav2";
    detailRightRef.value = "detail-container-right2";
  } else {
    mainNav.value = "";
    detailRightRef.value = "";
  }
};
onMounted(() => {
  window.addEventListener("scroll", scrollTop, true);
});
</script>
<style scoped lang="scss">
* {
  margin: 0 auto;
}

.main-wrap {
  width: 1148px;
  padding: 16px;
}
.nav-wrap {
  width: 1148px;
  border-bottom: 1px solid #ebedf0;
  margin-bottom: 15px;
}
.main-nav {
  display: flex;
  margin-left: 0;
  width: 380px;
  height: 45px;
  box-sizing: border-box;
}
.main-nav2 {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 45px;
  background-color: #fff;
  padding: 16px 16px 4px 16px;
  z-index: 555;
  box-shadow: 0 15px 10px -20px #000;
}
.nav-item2 {
  text-align: left;
  margin: 0;
  padding-left: 20px;
}
.nav-title2 {
  font-size: 14px;
  color: #7d7e80;
  padding-bottom: 5px;
  text-align: center;
  margin: 0;
}
.nav-text2 {
  margin: 0;
  color: #d0d4d7;
}

.nav-item {
  text-align: left;
  margin-left: 0;
}
.nav-item-active {
  border-bottom: 5px solid #3e3f40;
  border-radius: 2px;
}

.nav-title {
  font-size: 14px;
  color: #7d7e80;
  padding-bottom: 5px;
  text-align: center;
}
.nav-text {
  font-size: 12px;
  color: #d0d4d7;
  margin-bottom: 20px;
}

.city-hotel {
  font-size: 12px;
  color: #aaa;
}
.hotel-title {
  font-size: 20px;
  color: #252626;
  font-weight: 800;
  padding: 10px 0;
}
.hotel-tag {
  display: flex;
  margin-top: 5px;
}
.hotel-tag li {
  background-color: #fff;
  margin: 0;
  padding: 5px 10px;
  margin-right: 8px;
  border-radius: 5px;
  font-size: 12px;
  color: #6b7999;
}

.detail-container-left {
  width: 718px;
  margin: 0;
  position: relative;
}
.detail-container-right2 {
  position: fixed;
  top: 82px;
  right: 180px;
  width: 374px;
  padding: 16px;
  margin-left: 20px;
  background-color: #fff;
  z-index: 999;
}
.detail-container-right {
  position: absolute;
  left: 718px;
  top: 0;
  width: 374px;
  padding: 16px;
  margin-left: 20px;
  background-color: #fff;
}
.confirm {
  width: 718px;
  height: 42px;
  padding: 15px 8px;
  background-color: #fff;
  margin-top: 15px;
  color: #6b7999;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}
.confirm-left {
  margin: 0;
  font-size: 12px;
}
.confirm-left span {
  padding-right: 5px;
  line-height: 12px;
}
.xiala-right {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}
.confirm-detail {
  width: 718px;
  padding: 0 16px;
  box-sizing: border-box;
  background-color: #fbfbfb;
}
.confirm-detail-wrap {
  padding: 15px 8px;
  height: 12px;
  font-size: 12px;
  color: #6b7a99;
  background-color: #fbfbfb;
  border-bottom: 1px solid #edf3f7;
}
.confirm-ok {
  font-weight: 700;
  margin-right: 5px;
}
.hotel-type-container {
  background-color: #fff;
}
.hotel-type-wrap {
  width: 458px;
  padding: 20px 16px;
  margin-left: 0;
  margin-top: 15px;
}
.hotel-type {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.hotel-type-item {
  display: flex;
  margin: 0;
}
.icon-jiudian {
  font-size: 30px;
  color: #ffd38e;
  margin-right: 8px;
}
.hotel-type-title {
  font-size: 16px;
  color: #252626;
}
.hotel-type-text {
  font-size: 14px;
  color: #8a9094;
  cursor: pointer;
}
.bed-size {
  width: 442px;
  height: 13px;
  padding: 8px;
  font-size: 12px;
  color: #585a5a;
  margin-top: 8px;
  background-color: #f5f6fa;
  border-radius: 5px;
}

.icon-xishougui {
  font-size: 30px;
  color: #b3e5dc;
  margin-right: 8px;
}
.icon-Bed {
  font-size: 30px;
  color: #ffafaf;
  margin-right: 8px;
}
.line {
  width: 100%;
  border-top: 1px solid #ebedf0;
}
.address {
  width: 686px;
  padding: 14px 16px;
  background-color: #fff;
  margin-right: 0;
}
.address-p {
  cursor: pointer;
}
.addressLeft {
  padding: 0;
}
.address p {
  font-size: 14px;
  color: #333333;
  padding: 2.5px 0;
}
.discount {
  width: 686px;
  padding: 12px 16px;
  background-color: #fff;
  margin: 15px 0;
}
.collect-coupons {
  width: 100%;
  display: flex;
  align-items: center;
}
.discount-title {
  margin: 0;
  width: 28px;
  margin-right: 8px;
  font-size: 14px;
  color: #8a9094;
}
.discount-text {
  margin: 0;
  font-size: 14px;
  color: #ff4d6a;
}
.stow {
  margin-right: 0;
  font-size: 12px;
  color: #7d7e80;
  cursor: pointer;
}
.stow .icon-xiala,
.stow.icon-xiangzuo1 {
  width: 12px;
  font-size: 12px;
  margin-left: 5px;
}
.money-wrap {
  display: flex;
  width: 662px;
  padding: 12px 0;
  margin-left: 36px;
}
.money-item {
  margin: 0;
  width: 84px;
  height: 95px;
  color: #fff;
  background-color: #ff4d6a;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.money-icon {
  font-size: 20px;
  font-weight: 700;
}
.money-num {
  font-size: 25px;
  font-weight: 900;
}
.money-text {
  font-size: 12px;
}
.landlord-wrap {
  margin: 0;
  width: 151px;
  height: 67px;
  padding: 14px 8px;
  background-color: #fff6f7;
}
.landlord-title {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  padding-bottom: 5px;
}
.landlord-text {
  font-size: 12px;
  color: #666;
}
.receive {
  margin: 0;
  width: 68px;
  background-color: #fff6f7;
  display: flex;
  justify-content: center;
  align-items: center;
}
.receive-item {
  background-color: #ff4d6a;
  color: #fff;
  padding: 5px 15px;
  border-radius: 30px;
}
.promotion {
  display: flex;
  width: 100%;
  align-items: center;
  margin-top: 15px;
}
.promotion-tag {
  display: flex;
  margin: 0;
}
.promotion-tag li,
.tag-title {
  font-size: 12px;
  color: #ff4d6a;
  background-color: #ffedf0;
  padding: 3px 5px;
  margin-right: 10px;
  border-radius: 3px;
}
.tag-detail-wrap {
  margin-left: 36px;
  background-color: #fff;
  width: 650px;
}
.tag-detail {
  padding: 12px 0;
}
.tag-text {
  color: #252626;
}
.host-wrap {
  width: 718px;
  margin: 40px 0 12px 0;
}
.host {
  font-size: 24px;
  color: #252626;
  font-weight: 900;
  position: relative;
}
.host-text {
  position: absolute;
  font-size: 10px;
  margin-left: 4px;
  font-style: italic;
  color: #d0d4d7;
  text-align: top;
  text-transform: uppercase;
  font-weight: 500;
}
.hotel-name-wrap {
  display: flex;
  width: 702px;
  padding: 12px 8px;
  background-color: #fff;
}
.hotel-name-img {
  margin: 0;
  width: 56px;
  height: 56px;
}
.hotel-name-item {
  margin: 0;
  margin-left: 15px;
}
.hotel-name-title {
  font-size: 16px;
  color: #252626;
  height: 16px;
  margin: 8px 0;
}
.hotel-name-text {
  font-size: 12px;
  color: #7d7e80;
}
</style>
